<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>幸运翻牌</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="css/luckyCard.min.css">
</head>
<body>
	<div id="fanzhuan">
	    <div class="flip-container" >
	        <div  class="flipper" v-for="item in prizeList" :class="{fan:item.fan}" @click="fanpai(item)" >
	            <div class="front"  >
	                <img src="img/front.png" alt="">
	            </div>
		        <!--没中奖显示默认图片 ,中奖显示中奖图片, 切换背景图-->
	            <div class="back" v-if="!item.img">
					<img  src="img/no_prize_bg.png" alt="">
	            </div>
		        <div class="back" v-else>
					<img  src="img/back.png" alt="">
	                <img class="prize-img"  v-bind:src="item.img" alt="">
	            </div>


	        </div>
	    </div>

	</div>
	<script src="../common/lib/vue.min.js"></script>

	<script>

		const fanzhuan = new Vue({
            el: '#fanzhuan',
            data: {
                isShow:false,
                win:true,
                prize: true,
                clickNum:1,
//                fan:false, //默认关闭翻转状态
                prizeList:[
                    {id:0,fan:0,img:''},
                    {id:1,fan:0,img:''},
                    {id:2,fan:0,img:'../common/img/prize.jpg'},
                    {id:3,fan:0,img:''},
                    {id:4,fan:0,img:''},
                    {id:5,fan:0,img:''}
                ]
            },
            methods:{
                //翻转卡片
                fanpai:function  (e) {
                    const that = this
                    console.log(e)
                    //只能点一次
                    if(that.clickNum) {
                        that.clickNum = 0
                        e.fan = 1
                        setTimeout(function () {
                            for (let x of that.prizeList) {
                                x.fan = 1
                            }
                        }, 1500)
                    }

                },
                getResult: function () {
                    const that = this
                    setTimeout(function () {
                        that.isShow = !that.isShow
                    },1500)
                },
                showPrize: function () {
                    this.prize = !this.prize
                },
                getResult2: function () {
                    const that = this
                    setTimeout(function () {
                        that.win = !that.win
//                        that.isShow = !that.isShow
                    },1500)
                },
                close: function () {
                    this.isShow = !this.isShow
                    this.win = !this.win
                }
            }

        })
	</script>
</body>
</html>